<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转木马</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .box {
            position: relative;
            width: 613px;
            height: 230px;
            margin: 200px auto;
        }

        li {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        li img {
            width: 100%;
        }

        li:first-child,
        li:last-child {
            top: -100px;
            left: -150px;
            width: 360px;
            height: 100px;
            z-index: 3;
            opacity: 0.5;
        }

        li:last-child {
            left: 390px;
        }

        li:nth-child(2n) {
            top: 0;
            left: -300px;
            width: 450px;
            height: 150px;
            opacity: 0.8;
            z-index: 5;
        }

        li:nth-child(4) {
            left: 450px;
        }

        li:nth-child(3) {
            top: 50px;
            left: 0;
            width: 613px;
            height: 230px;
            z-index: 9;
            opacity: 1;
        }

        button {

            padding: 15px 25px;
        }
    </style>
</head>

<body>

    <button>上一张</button>
    <button>下一张</button>

    <ul class="box">
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/5.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
    </ul>


    <script>
        // 旋转方向动画实际就是更改元素样式


        // 获取所有li进入页面的样式，标号，按顺序获取
        // 必须是有关变化的所有元素样式值
        var styleArr = [{
            //0 页面最后的元素,是第一个和最后一个,样式相同,左边距不同
            top: -100,
            left: -150,
            width: 360,
            height: 100,
            zIndex: 3,
            opacity: .5
        }, {

            //1 第二个元素,索引为1,样式和索引是倒数第二个一样(3),左边距不同
            top: 0,
            left: -300,
            width: 450,
            height: 150,
            zIndex: 5,
            opacity: .8
        }, {
            //2 最前方显示元素的样式  zindex的为最大,
            top: 50,
            left: 0,
            width: 613,
            height: 230,
            zIndex: 9,
            opacity: 1
        }, {
            // 3  样式和索引是第二个一样(1),左边距不同
            top: 0,
            left: 450,
            width: 450,
            height: 150,
            zIndex: 5,
            opacity: .8
        }, {
            //4 索引为最后的元素和第一个元素的样式相同  边距不同
            top: -100,
            left: 390,
            width: 360,
            height: 100,
            zIndex: 3,
            opacity: .5
        }];


        // 先获取元素
        var btn = document.querySelectorAll("button"),
            lis = document.querySelectorAll("li");

        // 给按钮绑定事件
        btn[0].onclick = function () {
            // 上一张
            // console.log(0);
            // 把右边的样式赋给左边,所有的样式顺时针转
            styleArr.unshift(styleArr.pop());
            for(var i=0;i<styleArr.length;i++){
                animate(lis[i],styleArr[i])
            }
        };
        btn[1].onclick = function () {
            // 下一张
            // console.log(1);
            // animate(lis[0],400);
            styleArr.push(styleArr.shift());
            for(var i=0;i<styleArr.length;i++){
                animate(lis[i],styleArr[i])
            }
        };


        // 添加动画函数

        /*
            参数：ele>>>>>>>>>>>>>需要运动的元素
                  styleObj>>>>>>>>更改的样式对象索引
        */
        function animate(ele, styleObj) {
            // 每次运行清除上一个函数的定时器
            if (ele.timer) {
                clearInterval(ele.timer);
            }

            // 添加定时器   使其运动
            ele.timer = setInterval(function () {
                // 声明一个状态表示元素全部到达终点
                var flag = true;


                // 让每个样式都进行更改，先遍历每个元素

                for (var i in styleObj) {
                    // i是styleName   元素的样式名字
                    // 声明起点和终点
                    var start, end;
                    // 1,如果当前是opacity  先放大她们的值
                    if (i == "opacity") {
                        // getComputedStyle获取元素的样式值
                        start = parseInt(getComputedStyle(ele, null)[i] * 100);
                        end = styleObj[i] * 100;
                    } else if (i == "zIndex") {
                        ele.style.zIndex = styleObj[i];
                        continue;
                    } else {
                        start = parseInt(getComputedStyle(ele, null)[i]);
                        end = styleObj[i];
                    }

                    // 设置步长值
                    var step = (end - start) / 10;
                    if (Math.abs(step) < 1) {
                        step = step > 0 ? 1 : Math.floor(step);
                    }

                    if (i == "opacity") {
                        ele.style.opacity = (start + step) / 100;
                    } else {
                        ele.style[i] = start + step + "px";
                    }
                    // 要让所有的样式都到达终点，才能停止计时器
                    // 还要判断有没有没有到达的

                    if (start + step !== end) {
                        flag = false;
                    }
                }
                // for 循环内部都到达了终点
                if (flag) {
                    clearInterval(ele.timer);
                    ele.timer = null;
                    console.log(666);
                }

            }, 1000 / 60); //每秒60帧
        }
    </script>
</body>

</html>